<template>
  <div class="courseInfo">
    <div class="header-con">
      <div class="header">
        <van-nav-bar
          title="全部课程"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </div>
      <!-- 导航 -->
      <div class="header-navs">
        <div class="class">
          <div class="cla-title" v-for="tit in obj" :key="tit.id">
            <h5 @click="sort(i.type, tit.title)" :class="{active:alldire==0&&!contentType}">{{ tit.title }}</h5>
            <div class="cla-info">
              <p
                v-for="i in tit.info"
                :key="i.name"
                :class="{
                  active: type==i.type&&tit.id==route.query.class
                }"
                @click="sort(i.type, tit.title)"
              >
                {{ i.name }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <div class="products">
      <div class="list-con" v-for="item in res.product" :key="item.id">
        <img :src="item.coverUrl" alt="" />
        <div class="info">
          <div class="tit">
            <p>书法</p>
            <h3>{{ item.productName }}</h3>
          </div>
          <p>共{{ item.bizProdCount }}天</p>
          <div class="price">
            <p>开课中</p>
            <h4>{{ item.discountPrice.toString().slice(0, 3) }}元</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive } from "vue";
import { useRoute } from "vue-router";

const onClickLeft = () => history.back();

const { $axios } = getCurrentInstance().appContext.config.globalProperties;
let res = reactive({
  product: {},
  // type:1
});
const route = useRoute();
let type = route.query.type;
// let cla=route.query.class;
// console.log(cla);
$axios(
  `/apixt/product/api/product/products?page=1&pageSize=10&productType=${type}`,
  "GET",
  {
    headers: {
      "x-xt-client-info": "platform=h5;version=2.7.8",
    },
  }
).then((data) => {
  res.product = data.data;
});


let obj = [
  {
    title: "全部方向",
    id: 0,
    info: [
      { name: "书法", type: 1 },
      { name: "国画", type: 5 },
      { name: "书画", type: 7 },
    ],
  },
  {
    title: "全部分类",
    id: 1,
    info: [
      { name: "直播课", type: 1 },
      { name: "教练日常", type: 2 },
      { name: "展览辅导课", type: 3 },
    ],
  },
];
// 获取当前的时间戳
let timer = +new Date();
// console.log(timer);

var contentType = "";
var productType = "";
let alldire=0;
let allcla=1;
let sort = (type, title) => {
  var url = ``;
  if (title == "全部方向") {
    contentType = type;
     allcla=0;
  } else if (title == "全部分类") {
    productType = type;
    allcla=1;
  }
  if (contentType || productType) {
    url = `/apixt/product/api/product/products?contentType=${contentType}&page=1&pageSize=10&productType=${productType}`;
  } else if (contentType || !productType) {
    url = `/apixt/product/api/product/products?contentType=${contentType}&page=1&pageSize=10`;
  } else if (productType || !contentType) {
    url = `/apixt/product/api/product/products?page=1&pageSize=10&productType=${productType}`;
  } else {
    url = `/apixt/product/api/product/products?page=1&pageSize=10`;
  }
  $axios(url, "GET", {
    headers: {
      "x-xt-client-info": "platform=h5;version=2.7.8",
    },
  }).then((data) => {
    res.product = data.data;
  });
};

$axios("/apixt/product/api/product/products?page=1&pageSize=10", "GET", {
  headers: {
    "x-xt-client-info": "platform=h5;version=2.7.8",
  },
}).then((data) => {
  res.product = data.data;
});
</script>

<style lang="less">
.active {
  color: #ad9174 !important;
  background: rgba(224, 191, 149, 0.1) !important;
}
.courseInfo {
  height: calc(100vh - 50px);
  overflow-y: scroll;
  background-color: #eee;
  div.header-con {
    .header-navs {
      margin-top: 20px;
      .class {
        padding: 0 20px;
        .cla-title {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          h5 {
            color: #999;
            background: #fff;
            padding: 4px 8px;
            font-size: 12px;
            border-radius: 10px;
            font-weight: normal;
          }
          .cla-info {
            display: flex;
            p {
              margin-left: 20px;
              color: #999;
              background: #fff;
              padding: 4px 8px;
              font-size: 12px;
              border-radius: 10px;
            }
          }
        }
      }
    }
  }
  /* 列表 */
  .products {
    padding: 0 20px;
    .list-con {
      background-color: #fff;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      padding: 20px;
      margin-top: 20px;
      img {
        width: 80px;
        height: 80px;
        border-radius: 10px;
      }
      .info {
        width: 65%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .tit {
          display: flex;
          p {
            padding: 3px 5px;
            min-width: 27px;
            // 设置最小宽的原因：因为旁边的字溢出隐藏了 占高 所以设置内边距时自动撑开高度。设置最小宽就不会受溢出隐藏的影响了
            text-align: center;
            font-size: 10px;
            background: #ad9174;
            color: #fff;
          }
          h3 {
            font-size: 12px;
            margin-left: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        p {
          color: #ccc;
          font-size: 14px;
        }
        .price {
          display: flex;
          justify-content: space-between;
          p {
            width: 50px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            background: rgba(173, 129, 83, 0.08);
            color: #ad8153;
            font-size: 12px;
          }
          h4 {
            color: #181c25;
            font-size: 14px;
            font-weight: normal;
          }
        }
      }
    }
  }
}
</style>
